<template>
	<view class="hui">
		<view class="list_box">
			<view class="info_box" v-for="(item,index) in list" :key="index">

				<view>
					<view class="name b_m_b">订单号:{{item.orderId}}</view>
					<view class="b_m_b" v-if="item.leaseId>0">设备编号:{{item.deviceNumber}}</view> 
                    <view v-if="params.materials=='accompanyingBed'">押金:{{item.price-item.deductible}}元</view>
					<view v-else>押金:{{item.price-item.amount-item.timeoutPrice}}元</view>
					<!-- 	<view v-if="item.price">{{item.price}}</view>
					<view v-else class="wu">暂无缴纳</view> -->
				</view>
				<view class="tui" v-if="item.leaseId<=0" @click="refund(item)">我要退还</view>
			</view>
		</view>
		<empty v-if="emptyShow" text="暂无数据"></empty>
	</view>
</template>

<script>
	import {
		depositList,deviceDepositRefund
	} from "@/require/api.js";
	import empty from "@/components/empty.vue";
	export default {
		components: {
			empty
		},
		data() {
			return {
				params: {
					materials: '',
					refund:0
				},
				list: [],
				emptyShow: true
			}
		},
		onLoad(data) {
			if (data.materials) this.params.materials = data.materials;
		},
		onShow() {
			this.getList();
		},
		methods: {
			async getList() {
				let {
					data
				} = await depositList(this.params);
				this.list = data;
				if (data.length < 1 || !data) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
			},
			refund(item) {

				let _ = this;
				uni.showModal({
					title: '确认是否退还押金?',
					success(res) {
						if (res.confirm) {
							deviceDepositRefund({
								id: item.id
							}).then(res => {
								if (res.code == 200) {
									_.$project.toast('操作成功');
									_.getList();
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list_box {
		box-sizing: border-box;
		padding: 40rpx;
		width: 100%;
	}

	.info_box {
		background-color: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 35rpx 30rpx;
		margin-bottom: 40rpx;
		color: #252B50;
		font-size: 30rpx;
		font-weight: 500;
	}

	.tui {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #3C7CFF;
		border-radius: 26rpx;
		color: #fff;
		text-align: center;
		font-size: 26rpx;
		margin-left: auto;
	}
</style>